import React, { PureComponent } from 'react';
import moment from 'moment';
import { List, Spin ,Button,Avatar,notification,Row,Col,Modal   } from 'antd';
import styles from './index.less';

var timer = null;
class MsgContent extends PureComponent {
  state = {
    resultDataSource:[],
    selectedRowData:{
      id: '',
      avatar:'',
      name: '',
      source: '',
      content: '',
      messageType:'',
      translation: '',
      sendDate: '',
      addressCode: '',
      audit:'',
      contactPerson:'',
      contactPhone: ''
    },
    showMoreMessage:true,
    replayMessageValue:"",
    loading:true,              //页面第一次进入，显示加载 其他时候不需要加载
    loadingMore: false,        // 点击加载更多的时候，加载更多的按钮 显示小圆圈
    showLoadingMore: true,
    audioSrc:"",
    videoSrc:"",
    msgId:"",
    playbackRate:1.0,
    videoVisible: false
  };
  ////初始化渲染后触发
  componentDidMount() {
    var self = this;
    this.setState({
        loading:false,
    });
    this.props.auditData.data.pageNo = null;
  }
  ////每次接受新的props触发
  componentWillReceiveProps(nextProps) {
    const { loadingMore,auditData:{errorCode,msg,data:{pageNo,pageCount,pageSize,latestTime,list}}} = nextProps;
    if(nextProps.auditData.data.pageNo != this.props.auditData.data.pageNo){
      const newResultDataSource = this.state.resultDataSource.concat(list);
      this.setState({
        resultDataSource:newResultDataSource,
        previewVisible: false,
        previewImage: '',
        showLoadingMore:pageNo == pageCount ? false:true,
        loadingMore:loadingMore
      });
      if(pageNo == pageCount){
        notification["success"]({
          message: '消息提示',
          description: '消息已经加载完了哦！',
        });
      }
    }
  }



  //主播/导播点击播放音乐按钮
  handleMusicPlay = (id,msgAttSrc,msgContentType) => {
    var audio = this.refs.audioMusicPlay;
    var video = this.refs.videoMoviePlay;
    const msgId = this.state.msgId;
    if(msgContentType == 1){
      if(!video.paused){
        video.pause();
      }
      //设置好id和src
      this.setState({
        msgId:id,
        audioSrc:msgAttSrc
      });
      //如果ID不相等，一定是播放，如果ID相等则取反
      if(msgId != id){
        audio.play();
      }else {
        if(audio.paused){
          audio.play();
        }else{
          audio.pause();
        }
      }
    }else if(msgContentType == 4){
      if(!audio.paused){
        audio.pause();
      }
      this.setState({
        msgId:id,
        videoSrc:msgAttSrc,
        videoVisible:true
      });
    }

    event.stopPropagation();
  }
  handleCancelVideoModal= (record) => {
    var video = this.refs.videoMoviePlay;
    video.pause();
    this.setState({
      videoVisible:false
    });
  }
  //单击显示详细信息
  handleOnClick = (record) => {
    clearTimeout(timer);
    var self = this;
    timer = setTimeout(function() {
      self.props.handleOnClick(record);
    }, 300);
  }
  //双击直接通过
  handleOnDoubleClick = (record,index) => {
    clearTimeout(timer);
    this.props.handleOnDoubleClick(record);
    const newResultDataSource = this.state.resultDataSource;
    newResultDataSource.splice(index,1);
    this.setState({
      resultDataSource:newResultDataSource.concat([]),
    });
  }
  //点击通过按钮
  handlePassClick = (event,record,index) => {
    this.props.handlePassClick(record);
    const newResultDataSource = this.state.resultDataSource;
    newResultDataSource.splice(index,1);
    this.setState({
      resultDataSource:newResultDataSource.concat([]),
    });
    event.stopPropagation();
  }
  //点击忽略按钮
  handleIgnoreClick = (event,record,index) => {
    this.props.handleIgnoreClick(record);
    const newResultDataSource = this.state.resultDataSource;
    newResultDataSource.splice(index,1);
    this.setState({
      resultDataSource:newResultDataSource.concat([]),
    });
    event.stopPropagation();
  }
  render() {
    const { userType } = this.props;
    const {loading,loadingMore,showLoadingMore,audioSrc,videoSrc} = this.state;
    const actionsTitle = userType == 1 ? "通过" : "播放" ;

    const VidoDiv = ({ msgAttachmentAddr, radioLen }) =>  (
      <div style={{marginLeft:12}}>
        <div style={{ float:"left", height:26,width:135,backgroundImage:"url("+require("../../../../public/audioImage.png")+")"}}>
          <img src={require("../../../../public/audioImage3.png")} style={{marginLeft:10, height:26,width:26}}/>
        </div>
        <div style={{float:"left",marginTop:3,marginLeft:5}}>{radioLen}"</div>
      </div>
    );
    const textDiv = ({ msgAttachmentAddr }) =>  (
      <div style={{marginLeft:12}}>
        {msgAttachmentAddr}
      </div>
    );

    const generateVidoTestDiv = (msgContentType,msgAttachmentAddr, radioLen ) => {
      if(msgContentType == 0){
        return <textDiv msgAttachmentAddr={msgAttachmentAddr} />
      }else if(msgContentType == 1){
        return <VidoDiv msgAttachmentAddr={msgAttachmentAddr} radioLen={radioLen}/>
      }
    }


    const loadMore = showLoadingMore ? (
      <div style={{ textAlign: 'center', marginTop: 12, height: 32, lineHeight: '32px' }}>
        {loadingMore && <Spin />}
        {!loadingMore && <Button onClick={() => this.props.onLoadMore() }>加载更多....</Button>}
      </div>
    ) : null;
    return (
      <div >
          <List
            className="demo-loadmore-list"
            loading={loading}
            itemLayout="horizontal"
            loadMore={loadMore}
            dataSource={this.state.resultDataSource}
            header={<Row gutter={24} style={{textAlign:"center"}}>
                      <Col xl={5} lg={24} md={24} sm={24} xs={24}>
                        <div >用户</div>
                      </Col>
                      <Col xl={4} lg={24} md={24} sm={24} xs={24}>
                        <div >消息内容</div>
                      </Col>
                      <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                        <div >自动翻译</div>
                      </Col>
                      <Col xl={3} lg={24} md={24} sm={24} xs={24}>
                        <div >操作</div>
                      </Col>
                  </Row>
            }
            renderItem={(item,index) => (
              <List.Item actions={[<a onClick={(event) => this.handlePassClick(event,item,index)}>{actionsTitle}</a>, <a onClick={(event) => this.handleIgnoreClick(event,item,index)} >忽略</a>] }  onClick={() => this.handleOnClick(item)} onDoubleClick={() => this.handleOnDoubleClick(item,index)}>
                <List.Item.Meta
                  avatar={<Avatar src="{item.headimgurl}" />}
                  title={<a href="">{item.nickname}</a>}
                  description={<div><a style={{color:'#808080',fontSize:12 }}>{moment(item.msgTime).format('YYYY-MM-DD H:M:S')}</a>来自<a  style={{color:'#808080',fontSize:12}}> APP</a></div>}
                />
                <div style={{width:"100%"}}>
                  <Row gutter={24}>
                    <Col xl={10} lg={24} md={24} sm={24} xs={24}>
                     {/* {generateVidoTestDiv(item.msgContentType,item.msgAttachmentAddr, item.radioLen )}*/}
                      <div style={{marginLeft:12}}>
                        <div onClick={() => this.handleMusicPlay(item.id,item.msgAttachmentAddr,item.msgContentType)} style={{ float:"left", height:26,width:135,backgroundImage:"url("+require("../../../../public/audioImage.png")+")"}}>
                          <img src={require("../../../../public/audioImage3.png")} style={{marginLeft:10, height:26,width:26}}/>
                        </div>
                        <div style={{float:"left",marginTop:3}}>126"</div>
                      </div>
                    </Col>
                    <Col xl={14} lg={24} md={24} sm={24} xs={24}>
                      <div >{item.msgTxtContent}</div>
                    </Col>
                  </Row>
                </div>
              </List.Item>
            )}
          />
          <div>
            {/*音乐播放组件*/}
            <audio ref="audioMusicPlay"
                   src={audioSrc}
                   style={{display:"none"}}
            >
              您当前的浏览器不支持该播放控件
            </audio>
            {/*视频播放组件*/}
            <Modal
              visible={this.state.videoVisible}
              maskClosable={true}
              footer={null}
              onCancel={this.handleCancelVideoModal}
              /*onClick={() => this.handelPlayVideo()}*/
              width={560}
            >
              <video src={videoSrc} controls="controls" ref="videoMoviePlay"  style={{width:512,height:488}}>
                您的浏览器不支持 video 标签。
              </video>
            </Modal>
          </div>
      </div>
    );
  }
}

export default MsgContent;
